<template>
  <Card style="height:800px">
    <Row :gutter="16">
      <Col span="6">
      <Button type="text" style="font-family:'PingFang SC'font-weight:boldfont-size:16pxcolor:#57a3f3" @click="triggerAddRootNode">组织机构</Button>
      <Tree :data="treeData" @on-select-change="handleSelectChange"></Tree>
      </Col>
      <Col span="18">
      <div v-if="this.subVue === 'view'">
        <Row>
          <Col>
          <Table :columns="columns1" :data="pageList.data"></Table>
          </Col>
        </Row>
        <br>
        <Row :gutter="16" type="flex" justify="center" align="middle">
          <Col>
          <Button type="primary" @click="handleAdd">新增机构</Button>
          </Col>
          <Col>
          <Button type="primary" @click="handleEdit">编辑</Button>
          </Col>
          <Col>
          <Button type="error" @click="handleDel">删除</Button>
          </Col>
        </Row>
      </div>
      <div v-if="this.subVue === 'edit'">
        <Form ref="form" :model="form" :rules="rules" :label-width="80">
          <FormItem label="机构代码" prop="orgCode">
            <Input v-model="form.orgCode" placeholder="" :disabled="this.type===2">
            </Input>
          </FormItem>
          <FormItem label="机构名称" prop="orgName">
            <Input v-model="form.orgName" placeholder="">
            </Input>
          </FormItem>
          <FormItem label="上级机构" prop="parentOrgName">
            <Input v-model="form.parentOrgName" disabled placeholder="">
            </Input>
          </FormItem>
          <FormItem label="描述" prop="description">
            <Input v-model="form.description" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="">
            </Input>
          </FormItem>
          <FormItem v-if="this.type===1 || this.type ===2 || this.type===3">
            <Button type="primary" @click="handleSubmit">确定</Button>
            <Button type="primary" style="margin-left: 8px" @click="handleBack">返回</Button>
          </FormItem>
          <FormItem v-if="this.type===0">
            <Button type="primary" @click="handleGo(2)">编辑</Button>
            <Button type="error" @click="deleteOrg">删除</Button>
            <Button type="" style="margin-left: 8px" @click="handleBack">返回</Button>
          </FormItem>
        </Form>
      </div>
      </Col>
    </Row>
  </Card>
</template>

<script>
export default {
  data () {
    return {
      baseUrl: this.$appContext.marvels_core_system,
      $ajax: null,
      columns1: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          align: 'center',
          title: '机构代码',
          key: 'orgCode'
        },
        {
          align: 'center',
          title: '机构名称',
          key: 'orgName'
        },
        {
          align: 'center',
          title: '机构描述',
          key: 'description'
        },
        {
          align: 'center',
          title: '上级机构',
          key: 'parentOrgName'
        },
        {
          align: 'center',
          title: '最后更新时间',
          key: 'updatedDate',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.formatTime(params.row.updatedDate))
            ])
          }
        },
        {
          align: 'center',
          title: '最后更新人员',
          key: 'updatedBy'
        }
      ],
      subVue: '',
      type: null, // 2修改 1新增子节点 3新增根节点 4删除节点及子节点
      treeData: [],
      pageList: {
        data: [],
        pageTotal: 1,
        pageNum: 1,
        pageSize: 10
      },
      choosedOrg: {},
      form: {
        orgCode: null,
        orgName: null,
        parentOrgName: null,
        parentOrgCode: null,
        description: null
      },
      rules: {
        orgCode: [
          {
            required: true,
            message: '机构代码不能为空',
            trigger: 'blur'
          }
        ],
        orgName: [
          {
            required: true,
            message: '机构名称不能为空',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    // subVue:{
    //     get:function(){
    //         return this.subVue
    //     },
    //     set:function(v){
    //         this.subVue = v
    //     }
    // },
    // type: { //2修改 1新增子节点 3新增根节点 4删除节点及子节点
    //     set:function(t){
    //         this.type = t
    //     },
    //     get:function(){
    //         return this.type
    //     }
    // },
    // treeData:{
    //     set:function(t){
    //         this.treeData.push(t)
    //     },
    //     get:function(){
    //         return this.treeData
    //     }
    // }
  },
  methods: {
    // 添加机构根节点
    triggerAddRootNode: function () {
      // this.$router.push({
      //     name: 'orgEditor',
      //     query: {
      //         type: 3
      //     }
      // })
      this.subVue = 'edit'
      this.type = 3
      this.form = {}
    },
    initpage: function () {
      var vm = this
      this.$ajax
        .post(this.baseUrl + 'system/pmsn/service/getOrgTree')
        .then(re => {
          var data = re.data
          var code = data.code
          var message = data.message
          if (code !== 'success') {
            this.$Message.warning(message)
            return
          }
          vm.treeData = vm.toTree(data.data)
        })
        .catch(er => { })
    },
    toTree: function (data) {
      var vm = this
      if (data && data.length > 0) {
        for (var index in data) {
          var onedata = data[index]
          data[index].title = onedata.orgName
          if (data[index].children && data[index].children.length > 0) {
            vm.toTree(data[index].children)
          }
        }
      }
      return data
    },
    // 机构树节点点击事件
    handleSelectChange (val) {
      // this.$router.push({
      //     name: 'orgDetail',
      //     query: {
      //         orgId: val[0].orgId
      //     }
      // })
      this.subVue = 'view'
      this.choosedOrg = val[0]
      this.showOrgInfo()
    },
    showOrgInfo: function () {
      var vm = this
      var org = {
        orgId: this.choosedOrg.orgId
      }
      this.$ajax
        .post(this.baseUrl + 'system/pmsn/service/getOrgInfo', org)
        .then(re => {
          var data = re.data
          var code = data.code
          var message = data.message
          if (code !== 'success') {
            this.$Message.warning(message)
            return
          }
          vm.pageList.data = [data.data]
          this.choosedOrg = data.data
        })
        .catch(er => { })
    },
    handleAdd () {
      // this.$router.push({
      //     name: 'orgEditor',
      //     query: {
      //         type: 1,
      //         orgId: this.choosedOrg.orgId
      //     }
      // })
      this.subVue = 'edit'
      this.type = 1
      this.form = {}
      this.form.parentOrgName = this.choosedOrg.orgName
      this.form.parentOrgCode = this.choosedOrg.orgCode
    },
    handleEdit () {
      // this.$router.push({
      //     name: 'orgEditor',
      //     query: {
      //         type: 2,
      //         orgId: this.choosedOrg.orgId
      //     }
      // })
      this.subVue = 'edit'
      this.type = 2
      this.form = this.choosedOrg
    },
    handleDel () {
      this.type = 4
      var vm = this
      this.$Modal.confirm({
        content:
          '确认删除该节点【' + vm.choosedOrg.orgName + '】及其子节点吗？',
        onOk: function () {
          vm.$ajax
            .post(vm.baseUrl + 'system/pmsn/service/delOrg', vm.choosedOrg)
            .then(re => {
              var data = re.data
              var code = data.code
              var message = data.message
              if (code !== 'success') {
                this.$Message.warning(message)
                return
              }
              vm.subVue = ''
              vm.refreshTree(vm.treeData)
              vm.choosedOrg = {}
            })
            .catch(er => { })
        }
      })
    },
    // 刷新组织机构树
    refreshTree: function (listTree, subNode) {
      if (this.type === 4) {
        // 删除
        if (listTree && listTree.length > 0) {
          for (var i in listTree) {
            if (listTree[i].orgCode === this.choosedOrg.orgCode) {
              listTree.splice(i, 1)
              return
            }
            if (listTree[i].children && listTree[i].children.length > 0) {
              this.refreshTree(listTree[i].children)
            }
          }
        }
      } else if (this.type === 3) {
        // 新增根节点
        var newRoot = listTree
        newRoot.title = newRoot.orgName
        this.treeData.push(newRoot)
      } else if (this.type === 1) {
        // 新增子节点
        if (listTree && listTree.length > 0) {
          for (var ie in listTree) {
            if (listTree[ie].orgCode === this.choosedOrg.orgCode) {
              subNode.title = subNode.orgName
              if (!listTree[ie].children || listTree[ie].children.length < 1) {
                listTree[ie].children = []
              }
              listTree[ie].children.push(subNode)
              return
            }
            if (listTree[ie].children && listTree[ie].children.length > 0) {
              this.refreshTree(listTree[ie].children, subNode)
            }
          }
        }
      } else if (this.type === 2) {
        // 更新节点
        if (listTree && listTree.length > 0) {
          for (var it in listTree) {
            if (listTree[it].orgCode === this.choosedOrg.orgCode) {
              listTree[it].title = this.choosedOrg.orgName
              return
            }
            if (listTree[it].children && listTree[it].children.length > 0) {
              this.refreshTree(listTree[it].children)
            }
          }
        }
      }
    },
    handleSubmit () {
      var vm = this
      this.$refs.form.validate(valid => {
        if (valid) {
          var config = {
            title: '提示'
          }
          if (this.type === 2) {
            config.content = '是否确认修改?'
            config.onOk = vm.updateOrg
          } else if (this.type === 1) {
            config.content = '是否确认新建?'
            config.onOk = vm.addOrg
          } else if (this.type === 3) {
            config.content = '是否确认新建?'
            config.onOk = vm.addRootOrg
          }
          vm.$Modal.confirm(config)
        }
      })
    },
    updateOrg: function () {
      this.editOrg(this.baseUrl + 'system/pmsn/service/updateOrg')
    },
    addOrg: function () {
      this.editOrg(this.baseUrl + 'system/pmsn/service/addOrg')
    },
    editOrg: function (url) {
      var vm = this
      var org = this.form
      this.$ajax
        .post(url, org)
        .then(re => {
          var data = re.data
          var code = data.code
          var message = data.message
          if (code !== 'success') {
            this.$Message.warning(message)
            return
          }
          vm.refreshTree(vm.treeData, data.data)
          vm.handleBack()
          // TODO 刷新机构树
        })
        .catch(er => { })
    },
    handleBack: function () {
      this.subVue = 'view'
      this.type = null
      if (this.choosedOrg.orgId) {
        this.pageList.data = [this.choosedOrg]
      }
    },
    addRootOrg: function () {
      var vm = this
      var org = vm.form
      this.$ajax
        .post(this.baseUrl + 'system/pmsn/service/addRootOrg', org)
        .then(re => {
          var data = re.data
          var code = data.code
          var message = data.message
          if (code !== 'success') {
            this.$Message.warning(message)
            return
          }
          vm.refreshTree(data.data)
          this.handleBack()
        })
        .catch(er => { })
    }
  },
  mounted () {

  },
  created () {
    this.$ajax = this.$util.ajax()
    this.initpage()
  }
}
</script>
